import { Button, Input, Modal, Radio, Table, Text } from "@nextui-org/react";
import { BASEURL } from "../utils/config";
import { Notification } from "@douyinfe/semi-ui";
import { useState } from "react";

export default function NewStudent() {
  const [queryData, setQueryData] = useState({
    year: 2021,
    exam_name: "要查询的考试名称",
    student_name: "要查询的学生姓名",
  });
  const [resultDialogVisiable, setResultDialogVisiable] = useState(false);
  const [resultDialogData, setResultDialogData] = useState({});

  const columns = [
    {
      label: "科目",
      key: "class",
    },
    {
      label: "分数",
      key: "score",
    },
  ];
  let rows = [];
  let key = 1;
  for (let class_name in resultDialogData) {
    rows.push({
      key: key++,
      class: class_name,
      score: resultDialogData[class_name],
    });
  }

  return (
    <>
      <Modal
        open={resultDialogVisiable}
        closeButton
        aria-labelledby="查询结果"
        css={{ zIndex: 99999 }}
        onClose={() => setResultDialogVisiable(false)}
      >
        <Modal.Header>
          <Text b id="modal-title" size={18}>
            查询结果
          </Text>
        </Modal.Header>
        <Modal.Body>
          {resultDialogVisiable ? (
            <Table
              aria-label="查询结果"
              css={{
                height: "auto",
                minWidth: "100%",
              }}
            >
              <Table.Header columns={columns}>
                {(column) => (
                  <Table.Column key={column.key}>{column.label}</Table.Column>
                )}
              </Table.Header>
              <Table.Body items={rows}>
                {(item) => (
                  <Table.Row key={item.key}>
                    {(columnKey) => <Table.Cell>{item[columnKey]}</Table.Cell>}
                  </Table.Row>
                )}
              </Table.Body>
            </Table>
          ) : (
            <></>
          )}
        </Modal.Body>
      </Modal>
      <Modal open={true} aria-labelledby="成绩查询" preventClose={true}>
        <Modal.Header>
          <Text b id="modal-title" size={18}>
            成绩查询
          </Text>
        </Modal.Header>
        <Modal.Body>
          <Input
            color="primary"
            size="lg"
            label="届次"
            type="number"
            initialValue={queryData.year}
            onChange={(e) => {
              setQueryData({
                ...queryData,
                year: e.target.value,
              });
            }}
          />
          <Input
            color="primary"
            size="lg"
            label="考试名称"
            type="text"
            initialValue={queryData.exam_name}
            onChange={(e) => {
              setQueryData({
                ...queryData,
                exam_name: e.target.value,
              });
            }}
          />
          <Input
            color="primary"
            size="lg"
            label="学生姓名"
            type="text"
            initialValue={queryData.student_name}
            onChange={(e) => {
              setQueryData({
                ...queryData,
                student_name: e.target.value,
              });
            }}
          />
        </Modal.Body>
        <Modal.Footer>
          <Button
            auto
            onClick={() => {
              if (
                queryData.year &&
                queryData.exam_name &&
                queryData.student_name
              ) {
                fetch(
                  `${BASEURL}/exams/${queryData.year}/${queryData.exam_name}/${queryData.student_name}`
                )
                  .then((res) => res.json())
                  .then((res) => {
                    if (typeof res.detail === "undefined") {
                      setResultDialogData(res);
                      setResultDialogVisiable(true);
                      Notification.success({
                        content: `查询成功`,
                      });
                    } else {
                      Notification.error({
                        content: `查询失败 ${res.detail}`,
                      });
                    }
                  })
                  .catch((err) => {
                    Notification.error({
                      content: `查询失败 ${err}`,
                    });
                  });
              } else {
                Notification.error({
                  content: `请填写完整信息`,
                });
              }
            }}
          >
            提交
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}
